<template>
	<div>
		<div class="title">精选专辑</div>
		<div class="selected_nav">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="摄影图片" name="first"></el-tab-pane>
				<el-tab-pane label="矢量图库" name="second"></el-tab-pane>
			</el-tabs>
		</div>
		
		<div class="seleted_pic">
			<div class="seleted_pic_wrap">
				<div class="selected_item" v-for="(item, index) in album_info" :key='index'>
					<div class="img_wrap" :style="{backgroundImage: `url(${item.info_obj[0].photo_url})`}">
						
					</div>
					<div class="name">
						{{item.album_name}}
					</div>
				</div>
			</div>
		</div>
		
		<div class="more">
			<button>更多</button>
		</div>
	</div>
</template>

<script>
	import {get_album} from '../../API/get_album.js';
	export default {
		data() {
			return {
				activeName: 'second',
				album_info:[],
			};
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
				// console.log(this.album_info[0].info_obj[0].photo_url);
				if(tab.name == 'first'){
					get_album(1).then(res => {
						let temp = [];
						// console.log(res)
						res.data.data.forEach(el => {
							
							temp.push({
								album_name:el.album_name,
								info_obj: JSON.parse(el.info_obj),
								num: el.sort_num,
							})
						})
						this.album_info = temp;
					})
				}else{
					get_album(2).then(res => {
						// console.log(res)
						let temp = [];
						res.data.data.forEach(el => {
							temp.push({
								album_name:el.album_name,
								info_obj: JSON.parse(el.info_obj),
								num: el.sort_num,
							})
						})
						this.album_info = temp;
					})
				}
			}
		},
		created() {
			get_album(1).then(res => {
				// console.log(res)
				res.data.data.forEach(el => {
					this.album_info.push({
						album_name:el.album_name,
						info_obj: JSON.parse(el.info_obj),
						num: el.sort_num,
					})
				})
			})
		},
		
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 24px;
		font-family: "microsoft yahei";
		font-weight: 700;
	}
	.selected_nav{
		text-align: center;
	}
	::v-deep .el-tabs__header{
		display: flex;
		justify-content: center;
	}
	.seleted_pic{
		.seleted_pic_wrap{
			width: 90%;
			background-color: whitesmoke;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.selected_item{
				width: 23%;
				margin: 0.4%;
				padding-top: 22%;
				// background-color: red;
				overflow: hidden;
				position: relative;
				
				.img_wrap{
					
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
					transition: all .5s;
				}
				.img_wrap:hover{
					transform: scale(1.1);

				}
				.name{
					color: white;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					font-family: "microsoft yahei";
				}
				.img_wrap:hover + .name{
					color: black;
					font-weight: 700;
				}

			}
		}
	}
	::v-deep .el-tabs__header{
		margin: 10px auto;
	}
	.more{
		button{
			width: 162px;
			line-height: 40px;
			border-radius: 20px;
			margin: 38px auto;
		}
	
	}
</style>
